<template>
    <div>
        <!-- 车辆排班 -->
        <div class="container">
            <!-- 标题栏 -->
            <el-row>
                <el-col :span="24" class="ticket-title">车辆排班</el-col>
            </el-row>
            <!-- 表单栏 -->
            <!--<el-row class="form-container">-->
            <!--<el-col :span="24">-->
            <!--<avue-form v-model="checkFrom.obj" :option="checkFrom.option" class="yz-form"></avue-form>-->
            <!--</el-col>-->
            <!--<button class="check-btn form-btn" @click="check"><img-->
            <!--src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询-->
            <!--</button>-->
            <!--<button class="check-btn form-btn2" @click="load"><img-->
            <!--src="../../assets/imgs/operation_btn_icon_kaishixiazai_default copy.png" alt="" class="btn-img">导出Excel表格-->
            <!--</button>-->
            <!--</el-row>-->
            <div class="bottom-container">
                <el-row>
                    <el-col :span="24" class="choose-container">
                        <el-form ref="form" :model="form">
                            <el-col :span="9">
                                <el-form-item label="班次日期" label-width="70px">
                                    <el-date-picker type="daterange" v-model="form.busdate"
                                                    value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="营运单位" label-width="150px">
                                    <el-autocomplete v-model="form.ccustom"
                                                     :fetch-suggestions="querySearchComp"></el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="车牌号" label-width="120px">
                                    <el-autocomplete v-model="form.carno"
                                                     :fetch-suggestions="querySearchCarNum"></el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="班次状态" label-width="70px">
                                    <el-select v-model="form.busstau" placeholder="请选择">
                                        <el-option
                                                v-for="item in busStatusList"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="班次筛选" label-width="120px">
                                    <el-select v-model="form.bustype">
                                        <el-option
                                                v-for="item in busPlanTypeList"
                                                :key="item.key"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="车站" label-width="90px">
                                    <el-select v-model="form.busstation">
                                        <el-option
                                                v-for="item in busstationList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form>
                        <button class="check-btn form-btn" @click="check"><img
                                src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                        </button>
                        <button class="check-btn form-btn2" @click="load"><img
                                src="../../assets/imgs/operation_btn_icon_kaishixiazai_default copy.png" alt=""
                                class="btn-img">导出Excel表格
                        </button>
                    </el-col>
                </el-row>

            </div>
            <div style="margin-top:15px">
                <el-row type="flex" :gutter="1">
                    <el-col v-if="datearr.length" class="car-list-date-bg" :span="1" align="center">时间</el-col>
                    <el-col :span="3" v-for="item in datearr">
                        <div class="car-list-date-bg" align="center" >{{item}}</div>
                    </el-col>
                </el-row>
                <el-row type="flex" v-for="t in timearr" :gutter="1">
                    <el-col class="timestyle" :span="1" align="center">{{t}}</el-col>
                    <el-col :span="3" v-for="item in datearr">
                        <div v-for="cellitem in cell[item+'_'+t] || []">
                            <el-popover
                                    placement="top-start"
                                    width="150px"
                                    trigger="hover"
                                    visible-arrow="false"
                                    offset="14">
                                <div align="center" class="lineManagelinename">线路：{{cellitem.linename}}</div>
                                <div align="center" class="carManagelinename">班次号：{{cellitem.bus_id}}</div>
                                <div slot="reference" align="center"
                                     :class="cellitem.vehi_no===null?'grid-content' : 'grid-content2'">
                                    <div id="carinfo">{{cellitem.vehi_no || '无计划车牌'}}</div>
                                </div>
                            </el-popover>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from "qs";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    const DIC = {}
    export default {
        data() {
            return {
                cell: {},
                datearr: [],
                timearr: [],
//                dateformatarr: [],
                form: {
                    busdate: "",
                    ccustom: "",
                    carno: "",
                    busstau: "",
                    bustype: "",
                    busstation: "",
                },
                ccustomid: "",
                compList: [],
                carNumList: [],
                busStatusList: [],
                busstationList: [],
                busPlanTypeList: [
                    {
                        value: '0',
                        label: '所有班次'
                    },
                    {
                        value: '1',
                        label: '有计划班次'
                    },
                    {
                        value: '2',
                        label: '无计划班次'
                    }
                ],
            };
        },
        methods: {
            //营运单位自动补全
            querySearchComp(queryString, cb) {
                var arr = this.compList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return arr => {
                    //console.log();
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //营运单位请求
            loadComp() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            // 车牌自动补全
            querySearchCarNum(queryString, cb) {
                var arr = this.carNumList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //车牌请求
            loadCarNum() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.vehi_no});
                        }
                    });
                return arr;
            },
            //班次状态列表
            loadbusPlanType(){
                this.$http
                    .post("/sch/data/common/busstatus")
                    .then(data => {
                        this.busStatusList = data.data;
                    })
            },
            //站点列表自动补全
            querySearchbusstation(queryString, cb) {
                var arr = this.busstationList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //站点列表
            loadbusstation(){
                this.$http
                    .post("/sys/org/coachStation")
                    .then(data => {
                        this.busstationList = data.data;
                        this.form.busstation = this.busstationList.length > 0 ? this.busstationList[0].id : 0
                    })
            },
            //查询
            check(){
                let t = this;
                console.log(t.form.busdate[0]);
                console.log(t.form.busdate[1]);
                console.log(t.ccustomid)
                this.$http
                    .get(
                        '/enterprise/scheduling/vehi/timetable'
                        , {
                            params: {
                                start_date: t.form.busdate[0],
                                end_date: t.form.busdate[1],
                                customer_id: t.ccustomid,
                                vehino: t.form.carno,
                                busStatus: t.form.busstau,
                                busPlanType: t.form.bustype,
                                coachStation: t.form.busstation,
                            }
                        }
                    )
                    .then(data => {
                        let cell = {};
                        let alldate = {};
                        let alltime = {};
                        let redata = data.data;
                        for (let k of Object.keys(redata)) {
                            (redata[k] || []).forEach(e => {
//                                let dateformat = new Date(Date.parse(e.bus_date));
//                                alldate[e.bus_date] = dateformat;
                                alldate[e.bus_date] = e.bus_date;
                                alltime[e.bus_time] = e.bus_time;
                                let k = e.bus_date + "_" + e.bus_time;
                                let v = cell[k] || [];
                                cell[k] = v;
                                v.push(e);
                            });
                        }
                        this.cell = cell;
                        this.datearr = Object.keys(alldate);
                        this.timearr = Object.keys(alltime);
//                        this.dateformatarr = alldate;
                        console.log(this.datearr);
                        console.log(alldate);
//                        console.log(this.dateformatarr);
                    });
            },
            //导出excel表格
            load(){
                let t = this;
                this.$http
                    .get(
                        '/enterprise/scheduling/vehi/export'
                        ,{
                            params: {
                                ft:excel,
                                start_date: t.form.busdate[0],
                                end_date: t.form.busdate[1],
                                customer_id: t.ccustomid,
                                vehino: t.form.carno,
                                busStatus: t.form.busstau,
                                busPlanType: t.form.bustype,
                                coachStation: t.form.busstation,
                            }
                        }
                    )
            },
//            //时间格式化
//            formartDate(param) {
//                let date = new Date(param);
//                M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
//                D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
//                return M + D ;
//            },
            //获取列表
//            getDetailList()
//            {
//                this.$http
//                    .post("/enterprise/scheduling/vehi/timetable?start_date=2018-10-08&end_date=2018-10-12&customer_id=&vehino=&busStatus=1&busPlanType=0&coachStation=265")
//                    .then(data => {
//                        let cell = {};
//                        let alldate = {};
//                        let alltime = {};
//                        let redata = data.data;
//                        for (let k of Object.keys(redata)) {
//                            (redata[k] || []).forEach(e => {
//                                alldate[e.bus_date] = e.bus_date;
//                                alltime[e.bus_time] = e.bus_time;
//
//                                let k = e.bus_date + "_" + e.bus_time;
//                                let v = cell[k] || [];
//                                cell[k] = v;
//                                v.push(e);
//                            });
//                        }
//                        this.cell = cell;
//                        this.datearr = Object.keys(alldate);
//                        this.timearr = Object.keys(alltime);
//                    });
//            }
        },
        components: {},
        watch: {
            "form.ccustom":{
                handler(curVal,oldVal){
                    console.log(curVal,oldVal);
                    if (this.form.ccustom == "") {
                        this.ccustomid = "";
                    } else {
                        for (var item of this.compList) {
                            if (this.form.ccustom == item.value) {
                                this.ccustomid = item.prop;
                                break;
                            }else{
                                this.ccustomid = "";
                            }
                        }
                        console.log(this.ccustomid)
                    }
                },
                deep:true
            }
            },

        mounted() {
            console.log("车辆排班查询");
            this.$emit("sendActive", "1-3");
//            this.getDetailList();
            this.compList = this.loadComp();
            this.carNumList = this.loadCarNum();
            this.loadbusPlanType();
            this.busstationList = this.loadbusstation();
        }
    };
</script>
<style scoped src="../../assets/css/carManage/vehicleSchedule.css">
</style>
<style>
    .el-popover {
        background-color: gray !important;
    }
</style>
